<template>
  <a-modal :title='title' :width='1100' :visible='visible' :confirmLoading='confirmLoading' @cancel='handleCancel'
    @ok="handleOk" :cancel-text="disableSubmit ? '关闭' : '取消'"
    :ok-button-props="{ style: { display: disableSubmit ? 'none' : 'inline-block' } }">

    <a-spin :spinning='confirmLoading'>
      <a-form-model ref='form' :model='model' :rules='validatorRules'>
        <div class="formItemView">

          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='apiV3Key' required label='商户APIV3密钥'>
            <a-input :disabled='disableSubmit' placeholder='请输入商户APIV3密钥' v-model='model.apiV3Key' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='appid' required label='小程序唯一凭证'>
            <a-input :disabled='disableSubmit' placeholder='请输入小程序唯一凭证' v-model='model.appid' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='secret' required label='小程序唯一凭证密钥'>
            <a-input :disabled='disableSubmit' placeholder='请输入小程序唯一凭证密钥' v-model='model.secret' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='tenantId' required label='租户ID'>
            <a-input :disabled='disableSubmit' placeholder='请输入租户ID' v-model='model.tenantId' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='merchantId' required label='商户号'>
            <a-input :disabled='disableSubmit' placeholder='请输入商户号' v-model='model.merchantId' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='name' required label='商户名称'>
            <a-input :disabled='disableSubmit' placeholder='请输入商户名称' v-model='model.name' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='merchantSerialNum' required
            label='商户证书序列号'>
            <a-input :disabled='disableSubmit' placeholder='请输入商户证书序列号' v-model='model.merchantSerialNum' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='clientCertPath' required
            label='商户证书路径'>
            <a-input :disabled='disableSubmit' placeholder='请输入商户证书路径' v-model='model.clientCertPath' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='privateKeyPath' required
            label='商户API私钥路径'>
            <a-input :disabled='disableSubmit' placeholder='请输入商户API私钥路径' v-model='model.privateKeyPath' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='platformCertPath' required
            label='平台证书路径'>
            <a-input :disabled='disableSubmit' placeholder='请输入平台证书路径' v-model='model.platformCertPath' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='refundNotifyUrl' required
            label='退款回调地址'>
            <a-input :disabled='disableSubmit' placeholder='请输入退款回调地址' v-model='model.refundNotifyUrl' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' prop='notifyUrl' required label='支付回调地址'>
            <a-input :disabled='disableSubmit' placeholder='请输入支付回调地址' v-model='model.notifyUrl' />
          </a-form-model-item>
          <a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='备注'>
            <a-textarea :disabled='disableSubmit' placeholder='请输入备注' v-model='model.remark' :row='4' />
          </a-form-model-item>
        </div>

      </a-form-model>
    </a-spin>

  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { getAction, httpAction } from '@/api/manage'
import { queryall, addUser, editUser, queryUserRole } from '@/api/api'
import { duplicateCheck } from '@/api/api'
import JDictSelectTag from '@/components/dict/JDictSelectTag'

export default {
  name: 'weekModel',
  components: { JDictSelectTag },
  data() {
    return {
      title: '写周报',
      visible: false,
      disableSubmit: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        apiV3Key: [
          { required: true, message: '请输入商户APIV3密钥!', trigger: 'change' }
        ],
        appid: [
          { required: true, message: '请输入小程序唯一凭证!', trigger: 'change' }
        ],
        secret: [
          { required: true, message: '请输入小程序唯一凭证密钥!', trigger: 'change' }
        ],
        tenantId: [
          { required: true, message: '请输入租户ID!', trigger: 'change' }
        ],
        merchantId: [
          { required: true, message: '请输入商户号!', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入商户名称!', trigger: 'change' }
        ],
        merchantSerialNum: [
          { required: true, message: '请输入商户证书序列号!', trigger: 'change' }
        ],
        clientCertPath: [
          { required: true, message: '请输入商户证书路径!', trigger: 'change' }
        ],
        privateKeyPath: [
          { required: true, message: '请输入商户API私钥路径!', trigger: 'change' }
        ],
        platformCertPath: [
          { required: true, message: '请输入平台证书路径!', trigger: 'change' }
        ],
        refundNotifyUrl: [
          { required: true, message: '请输入退款回调地址!', trigger: 'change' }
        ]
      },
      url: {
        add: '/yw/ywWechatConfig/add',
        edit: '/yw/ywWechatConfig/edit'
      }
    }
  },
  created() {
  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.$refs.form.resetFields()
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let url = ''
          let method = ''
          if (!this.model.id) {
            url = this.url.add
            method = 'post'
          } else {
            url = this.url.edit
            method = 'put'
          }
          httpAction(url, that.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    }


  }
}
</script>

<style lang='less' scoped>
.formItemView {
  display: flex;
  flex-wrap: wrap;

  .ant-form-item {
    width: 45%;
    margin: 0 2% 20px;
  }
}</style>
